{{define "main-top"}}
<!DOCTYPE html>
<html lang="{{ .Lang }}" class="{{.ThemeClass}}" data-theme-mode="{{.ThemeMode}}">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="{{ resourceThemeUrl "css/zitadel.css" .Theme }}" type="text/css">
    
    {{ if hasCustomPolicy .LabelPolicy }}
        <link rel="stylesheet" href="{{ variablesCssFileUrl .PrivateLabelingOrgID .LabelPolicy}}" type="text/css">
        {{ $icon := customIconResource .PrivateLabelingOrgID .LabelPolicy .DarkMode }}
        {{if $icon}}
            <link rel="icon" type="image" href="{{$icon}}">
        {{end}}
    {{ else }}
        <link rel="icon" type="image/x-icon" href="{{ resourceThemeUrl "favicon.ico" .Theme }}">
    {{ end }}

    <link rel="stylesheet" href="{{ resourceThemeUrl "../../fonts/lgn-icons/css/lgn-icon-font.css" .Theme }}">

    <title>{{ .Title }}</title>
    <meta name="description" content="{{ .Description }}"/>
    <meta name="robots" content="none" />

    <script src="{{ resourceUrl "scripts/theme.js" }}"></script>
</head>

<!-- lgn-app-background tints the background to the selected theme colors -->
<body class="lgn-app-background">
    <div class="lgn-grow">
        <div class="lgn-max-width-wrapper">
            {{template "header" .}}
            <div class="content-container">
                {{end}}
                    <!-- here goes the content -->

                {{define "main-bottom"}}
            </div>
        </div>
    </div>
    <script src="{{ resourceUrl "scripts/avatar.js" }}"></script>
    <script src="{{ resourceUrl "scripts/touched.js" }}"></script>
</body>
{{template "footer" .}}
{{end}}
